<template>
  <div class="coupon" @click="couponClick">
    <div class="coupon__item" :class="(btntype === 3 || btntype === 4) ? 'grayscale' : '' ">
      <div class="coupon__wrap" :class="(btntype === 3 || btntype === 4) ? 'grayscale' : '' ">
        <div class="coupon__content" :class="{'coupon__content--expend' : expend}">
          <div class="coupon__left">
            <!-- <div class="coupon__border"></div> -->
            <div class="coupon__coupon-wrap">
              <div class="coupon__coupon-price mar-t--4">
                <div class="font-15 mar-b-3 mar-r--4 font-w" v-if="couponData.couponType !== 30">￥</div>
                <div class="coupon__price" :class="{'coupon__price-small': priceLength > 3}" v-if="couponData.couponType === 10">{{couponData.cashAmount}}</div>
                <div class="coupon__price" :class="{'coupon__price-small': priceLength > 3}" v-if="couponData.couponType === 20">{{couponData.reduceAmount}}</div>
                <div class="coupon__price" v-if="couponData.couponType === 30">{{(couponData.discountPercent)}}</div>
                <div class="font-13 mar-b-4" v-if="couponData.couponType === 30">折</div>
              </div>
              <div class="coupon__requirements font-12 mar-t-2" v-if="couponData.couponType === 20 || couponData.couponType === 30">
                <!-- fullAmountFlag 券使用是否不设门槛 0:设门槛 1：不设门槛 -->
                <span v-if="couponData.fullAmount && couponData.fullAmountFlag !== 1">{{'满' + couponData.fullAmount + '可用'}}</span>
                <span v-else>无门槛使用</span>
              </div>
              <div class="coupon__requirements font-12 mar-t-2" v-else>{{couponData.goodsRange === 1 ? '全部商品' : '部分商品'}}</div>
            </div>
          </div>
          <div class="coupon__right flex-item">
            <div class="coupon__coupon-content">
              <div class="font-w font-15">{{couponData.couponName}}</div>
              <div class="font-2 font-14 mar-l-7 mar-t-7">（{{couponData.couponRemark}}）</div>
              <div v-if="showExpend || couponData.validTimeType === 1">
                <div class="font-12 font-color-9 mar-t-11 width-160" v-if="couponData.validEndTime !== 'today'">{{couponData.validStartTime}} 至 {{couponData.validEndTime}}</div>
                <div class="font-12 mar-t-11" style="color: #EC3B1F;" v-else>今日到期</div>
              </div>
              <template v-else>
                <div class="font-12 font-color-9 mar-t-11 width-160" v-if="couponData.validTimeType === 2">领券当日起{{couponData.validFromToday}}天之内有效</div>
                <div class="font-12 font-color-9 mar-t-11 width-160"  v-if="couponData.validTimeType === 3">领券次日起{{couponData.validFromTomorrow}}天之内有效</div>
              </template>
            </div>
            <div v-if="btntype === 1">
              <!-- 领取优惠券 -->
              <div class="coupon__collect--get mar-t-20" v-if="couponData.receiveStatus === 1">
                <img class="width-44 height-44" v-if="fileSpace" :src="fileSpace + '/images/coupon-over.png'" alt="">
              </div>
              <div class="coupon__collect--no" v-else @click.stop="receiveBefore">领取</div>
            </div>
            <div v-if="btntype === 2">
              <!-- 使用优惠券 -->
              <div class="coupon__collect--yes" v-if="couponData.isUseable">去使用</div>
              <div class="coupon__collect--no" v-else>暂不可使用</div>
            </div>
            <div v-if="btntype === 3">
              <!-- 优惠券已使用 -->
              <div class="coupon__collect--get mar-t-20">
                <img class="width-44 height-44" v-if="fileSpace" :src="fileSpace + '/images/icon-coupon-used.png'" alt="">
              </div>
            </div>
            <div v-if="btntype === 4">
              <!-- 优惠券已失效 -->
              <div class="coupon__collect--get mar-t-20">
                <img class="width-44 height-44" v-if="fileSpace" :src="fileSpace + '/images/icon-coupon-over.png'" alt="">
              </div>
            </div>
          </div>
          <div class="coupon__arrow--bottom pad-l-10 pad-r-10 mar-r--10"
            @click.stop="expend = !expend" v-if="(couponData.ruleInfo || showExpend) && showInfo">
            <van-icon :name="expend ? 'arrow-up' : 'arrow-down'" size="15px" color="#999999" />
          </div>
        </div>
        <div class="coupon__expend" :class="{'coupon__expend--true pad-b-13': expend}" v-if="(couponData.ruleInfo || showExpend) && showInfo">
          <template v-if="showExpend">
            <div class="mar-t-15 font-12 pad-l-17">领取时间：{{couponData.receiveTime}}</div>
            <div class="font-12 mar-t-9 pad-l-17">券编码：{{couponData.memberCouponNo}}</div>
          </template>
          <div v-if="couponData.originalPriceFlag" class="font-12 pad-l-17" :class="showExpend ? 'mar-t-9':'mar-t-15'">使用限制：仅普通商品使用</div>
          <div class="pad-t-20 pad-l-17" v-if="couponData.ruleInfo">
            <div v-html="couponData.ruleInfo"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { doReceive } from '@/api/personal'
export default {
  name: 'Coupon',
  props: {
    // 优惠券信息
    coupon: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // 是否展示领券信息
    showExpend: {
      type: Boolean,
      default: false
    },
    // 右边优惠券状态
    btntype: {
      type: Number,
      default: 1
    },
    // 活动Id
    actionId: {
      type: String,
      default: ''
    },
    // 是否展示下拉
    showInfo: {
      type: Boolean,
      default: true
    },
    messageIds: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      couponData: {},
      expend: false,
      doReceiveParams: { // 领取优惠券请求参数
        couponId: '',
        customerMemberId: '',
        actionId: ''
      },
      messageData: []
    }
  },
  onShow() {
    this.couponData = this.$utils.deepClone(this.coupon)
    this.messageData = this.$utils.deepClone(this.messageIds)
  },
  mounted() {
    setTimeout(() => {
      this.couponData = this.$utils.deepClone(this.coupon)
      this.messageData = this.$utils.deepClone(this.messageIds)
    }, 100)
  },
  methods: {
    receiveBefore() {
      let that = this
      let rejectArr = []
      if (!this.messageData.length) {
        this.doReceive()
        return
      }
      this.$pt.requestSubscribeMessage({
        tmplIds: that.messageData,
        success: function(res) {
          // 成功
          Object.keys(res).forEach(key => {
            if (res[key] === 'reject') {
              rejectArr.push(key)
            }
          })
          if (rejectArr.length) {
            that.messageData = rejectArr
            that.$utils.showToast({title: '请允许消息通知！'})
          } else {
            that.doReceive()
          }
        },
        fail(err) {
          // 失败
          console.error(err)
        }
      })
    },
    doReceive() {
      // 领取优惠券
      this.doReceiveParams.couponId = this.couponData.couponId
      this.doReceiveParams.customerMemberId = this.getCustomerId
      this.doReceiveParams.actionId = this.actionId
      doReceive(this.doReceiveParams).then(response => {
        if (response.isError) return
        if (response.data.availableNum === 0 || !response.data.availableNum) {
          this.$utils.showToast({title: '领取成功'})
          this.$pt.setStorageSync('getCoupon', true)
          // 如果领取成功 在本地将领券状态修改，不做数据请求刷新页面
          this.couponData.receiveStatus = 1
          // let dataclone = this.$utils.deepClone(this.dataList)
          // this.dataList = dataclone
        } else {
          this.$utils.showToast({title: `领取成功!此券还可领${response.data.availableNum}张`})
        }
      }).catch(() => {
      })
    },
    couponClick() {
      this.$emit('click', this.couponData)
    }
  }
}
</script>
<style lang="less" scoped>
@light-orange: #FF593E;
@drak-orange: #EC3B1F;
.coupon{
  // box-shadow: 0 0 5px rgba(155, 155, 155, 0.11);
  &__item{
    width: 345px;
    border-radius: 8px;
    display: flex;
    &.grayscale{
      filter: grayscale(100%);
    }
  }
  &__wrap{
    position: relative;
    width: 100%;
    min-height: 109px;
    &.grayscale{
      filter: opacity(50%);
    }
    // filter: drop-shadow(0px 0px 10px rgba(155, 155, 155, 0.11));
  }
  &__content{
    display: flex;
    width: 100%;
    height: 109px;
    // background: 
      // radial-gradient(circle at right top, transparent 6px, #fff 0) top left / 110px 51% no-repeat,
      // radial-gradient(circle at right bottom, transparent 6px, #fff 0) bottom left / 110px 51% no-repeat,
      // radial-gradient(circle at left top, transparent 6px, #fff 0) top right / 236px 51% no-repeat,
      // radial-gradient(circle at left bottom, transparent 6px, #fff 0) bottom right / 236px 51% no-repeat;
    // filter: drop-shadow(0px 0px 10px rgba(155, 155, 155, 0.11));
    background: #fff;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    &::before{
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #f5f5f5;
      position: absolute;
      top: -6px;
      left: 98px;
    }
    &::after{
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #f5f5f5;
      position: absolute;
      bottom: -6px;
      left: 98px;
      // transition: all 0.5s;
    }
  }
  &__content--expend{
    &::after{
      content: "";
      background: #fff;
    }
  }
  &__border{
    width: 4px;
    height: 109px;
    position: relative;
    left: 0;
    top: 0;
    background-color: @light-orange;
    overflow: hidden;
  }
  &__left{
    display: flex;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
  }
  &__coupon-wrap{
    width: 104px;
    // padding-right: 6px;
    background: linear-gradient(128deg, #FF5C42, #ff7761);
    height: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  &__arrow--bottom{
    position: absolute;
    bottom: 5px;
    right: 10px;
  }
  &__coupon-price{
    display: flex;
    align-items: flex-end;
  }
  &__price{
    font-size: 36px;
    font-weight: bold;
  }
  &__price-small{ 
    font-size: 32px;
  }
  &__right{
    padding: 0 10px 0 15px;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  &__coupon-content{
    line-height: 1;
    height: 100%;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  &__collect--no{
    width: 50px;
    height: 22px;
    line-height: 22px;
    background-color: @light-orange;
    color: #fff;
    font-size: 12px;
    text-align: center;
    margin-top: 30px;
    border-radius: 11px;
  }
  &__collect--yes{
    width: 50px;
    height: 22px;
    line-height: 22px;
    background-color: @light-orange;
    border: @light-orange 1px solid;
    color: #fff;
    font-size: 11px;
    text-align: center;
    margin-top: 30px;
    border-radius: 11px;
  }
  &__expend{
    background: white;
    margin-top: -6px;
    width: 100%;
    border-radius:  0 0 8px 8px;
    height: 0px;
    overflow: hidden;
    line-height: 1;
    position: relative;
  }
  &__expend--true{
    height: auto;
  }
  &__ul{
    font-size: 12px;
    padding: 0 10px;
    line-height: 1;
    margin-top: 23px;
    li{
      display: flex;
      align-items: center;
      margin-bottom: 9.5px;
      &:last-child{
        margin-bottom: 13px;
      }
      .round-point{
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background-color: #333333;
        margin-right: 5px;
      }
    }
  }
  .coupon-explain{
    padding: 15px 0 12px;
    line-height: 1;
    font-size: 12px;
  }
}
</style>
